<template>
  <div class="gene_box" :style="{height:height}">
    <div class="gene_box_span l_t"></div>
    <div class="gene_box_span l_b"></div>
    <div class="gene_box_span r_t"></div>
    <div class="gene_box_span r_b"></div>
    <div class="gene_box_Content">
      <img :style="{height:size!='15px'?'32px':'auto'}" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210520/1621521405479.png" alt="">
      <h2 class="gene_box_Content_tit" :style="{fontSize:size,fontWeight:bold?'bold':''}" @click="onClickTit"><slot name="title"></slot>{{ title }}</h2>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name:"GeneBox",
  props:{
    title:{
      type:String,
      default:'主要指标'
    },
    height:{
      type:String,
      default:'180px'
    },
    size:{
      type:String,
      default:'15px'
    },
    bold:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    onClickTit(){
      this.$emit('clickTit')
    }
  }
}
</script>

<style>
.gene_box{
  background: rgba(89, 83, 210, 0.1);
  padding: 9px;
  position: relative;
  margin: 10px 0;
  overflow: hidden;
}
.gene_box_span{
  width: 18px;
  height: 2px;
  background: rgba(132, 126, 249, 0.6);
  position: absolute;
}
.l_t{
  top: 0;
  left: 0;
}
.l_b{
  left: 0;
  bottom: 0;
}
.r_t{
  top: 0;
  right: 0;
}
.r_b{
  right: 0;
  bottom: 0;
}
.gene_box_Content{
  border: 1px solid rgba(0, 255, 255, 0.4);
  width: 100%;
  height: 100%;
}
.gene_box_Content_tit{
  font-size: 15px;
  color: #fff;
  position: absolute;
  top: 15px;
  left: 30px;
  font-weight: 300;
  cursor: pointer;
}
</style>
